<template>
<div>
  <div class="background">
    <img :src="imgSrc" width="100%" height="100%" alt="背景图片" />
  </div>
  <div class="front">
    <div v-show="loginFormVisible"><el-form ref="loginForm" :model="loginForm" label-width="80px" class="login-box" enctype>
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item class="form_item" label="账号">
        <el-input type="text" placeholder="请输入账号" v-model="loginForm.username" @keyup.enter.native="doLogin"/>
      </el-form-item>
      <el-form-item class="form_item" label="密码">
        <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" @keyup.enter.native="doLogin"/>
      </el-form-item>
      <div class="tip">
        尚未有账号，<el-link @click="gotoReg" target="_blank">前往注册</el-link>
      </div>
      <el-form-item>
        <el-button class="login_btn" type="primary" v-on:click="doLogin">登录</el-button>
      </el-form-item>
    </el-form></div>

    <div v-show="regFormVisible">
      <el-form class="regForm" :rules="regRules" ref="regForm" :model="regForm" label-width="80px">
        <h3 class="login-title">欢迎注册</h3>
        <el-form-item class="form_item" label="账号" prop="loginname">
          <el-input type="text" placeholder="请输入账号" v-model="regForm.loginname"/>
        </el-form-item>
        <el-form-item class="form_item" label="密码" prop="loginpwd">
          <el-input type="password" placeholder="请输入密码" v-model="regForm.loginpwd"/>
        </el-form-item>
        <el-form-item class="form_item" label="用户名" prop="username">
          <el-input class="inp" placeholder="请输入用户名" v-model="regForm.username"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="昵称">
          <el-input class="inp" v-model="regForm.nickname"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="出生日期">
          <el-col class="inp" :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="regForm.birthday" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item class="form_item" label="电子邮箱">
          <el-input class="inp" v-model="regForm.email"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="手机号码">
          <el-input class="inp" v-model="regForm.phone"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="通信地址">
          <el-input class="inp" type="textarea" v-model="regForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doReg">立即注册</el-button>
          <el-button @click="regFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data: () => ({
    imgSrc: require('../../images/background2.jpg'),
    loginForm: {
      username: "",
      password: "",
    },
    loginFormVisible: true,
    regFormVisible: false,
    regForm: {
      loginname: '',
      loginpwd: '',
      username: '',
      nickname: '',
      birthday: '',
      email: '',
      phone: '',
      address: '',
    },
    regRules: {
      loginname: [
        { required: true, message: '账号禁止为空！', trigger: 'blur' },
      ],
      username: [
        { required: true, message: '姓名禁止为空！', trigger: 'blur' },
      ],
      loginpwd: [
        { required: true, message: '密码禁止为空！', trigger: 'blur' },
      ]
    }
  }),
  methods: {
    //登录
    doLogin() {
      if (!this.loginForm.username || !this.loginForm.password) {
        this.$message.error("用户名或密码不能为空！");
        return false;
      }
      this.$http.post("/user/login", "username="+this.loginForm.username+"&password="+this.loginForm.password).then(resp => {
        if(resp.data.errCode === 200){
          //根据store中set_token方法将token保存至localStorage/sessionStorage中，data["Authentication-Token"]，获取token的value值
          var map = resp.data.data;
          for(const key in map){
              if(key === 'token'){
                this.$store.commit('set_token', map[key]);
              }else{
                this.$store.commit('set_refresh_token', map[key]);
              }
          }
          this.$store.commit('set_loginInfo', this.loginForm);
          if (this.$store.state.token) {
            this.$router.push('/');
            console.log("accessToken: " + this.$store.state.token)
          } else {
            this.$router.replace('/login');
          }
          return true;
        }
        this.$message.error(resp.data.errCode + " : " + resp.data.errMsg);
      });
      return false;
    },
    gotoReg(){
      this.loginFormVisible = false;
      this.regFormVisible = true;
    },
    //注册
    doReg(){
      this.$http.post("/user/register", this.regForm).then(resp => {
        if(resp.data.errCode === 200){
          // this.$message.success("注册成功！即将进入登录页面...");
          this.$notify.success({
            title: 'SUCCESS',
            message: '注册成功！',
            showClose: false
          });
          this.regFormVisible = false;
          this.loginFormVisible = true;
          return;
        }
        this.$message.error(resp.data.errCode + " : " + resp.data.errMsg);
      });
    }
  }
};
</script>

<style scoped>
  .background{
    width:100%;
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;
  }
  
  .front{
    z-index:1; /** 值越大越显示在前 */
    position: relative;
  }

  .login-box {
    margin: 200px auto;
    position: absolute;
    left: 40%;
    /*display: table-cell;*/
    border: 1px solid #DCDFE6;
    width: 350px;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    font-size: large;
    text-align: center;
    margin: 0 auto 30px auto;
    color: #303133;
  }

  .form_item{
    position: relative;
    left: -20px;
  }

  .login_btn{
    width: 240px;
    position: relative;
    left: -60px;
  }
  .tip{
    color: #888888;
    font-size: small;
    margin-bottom: 10px;
    position: relative;
    left: 90px;
  }
  .regForm{
    margin: 100px auto;
    position: absolute;
    left: 38%;
    /*display: table-cell;*/
    border: 1px solid #DCDFE6;
    width: 450px;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .inp{
    width: 300px;
    background-color: #8c939d;
  }
</style>
